<template>
  <view class="medal">
    <view class="flex medal_list" v-for="(item, index) in medalList" :key="index">
      <image :src="item.image" alt="" />
      <span>{{ item.title }}</span>
    </view>

    <!-- <view class="flex items column justify-center">
      <image src="../../assets/images/xz2.png" alt="" />
      <span>勋章名称2</span>
    </view>

    <view class="flex items column justify-center">
      <image src="../../assets/images/xz3.png" alt="" />
      <span>勋章名称3</span>
    </view>

    <view class="flex items column justify-center">
      <image src="../../assets/images/xz4.png" alt="" />
      <span>勋章名称4</span>
    </view> -->
  </view>
</template>
<script setup>
import { userApi } from "../../api";
onLoad(() => {
  getMedal();
});
//获取勋章
const medalList = ref([]);
const getMedal = () => {
  userApi.medal().then((res) => {
    if (res.code == 1) {
      medalList.value = res.data;
      console.log("11", res.data);
    }
  });
};
</script>
<style lang="scss" scoped>
.medal {
  // height: 100%;
  // width: 100%;
  box-sizing: border-box;
  padding: 32rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
  .medal_list {
    display: flex;
    flex-direction: column;
    align-items: center;
   margin-left: 8rpx;
   margin-right: 8rpx;
    width: 212rpx;
    // height: 268rpx;
    margin-bottom: 24rpx;
    image {
      width: 212rpx;
      height: 212rpx;
      border: 2rpx dashed #ccc;
    }
    span {
      // height: 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
      line-height: 44rpx;
      display: inline-block;
      margin-top: 12rpx;
    }
  }
}
</style>